<template>
  <!-- 货物装载列表 -->
  <div>
    <div class="statistical-information">
      <span class="statistical-title">总件数：</span>
      <span class="statistical-number">{{ calculateSum.pkgsSum }}</span>
      <span class="statistical-title">总毛重：</span>
      <span class="statistical-number">{{ calculateSum.weightSum }}</span>
      <span class="statistical-title">总体积：</span>
      <span class="statistical-number" style="margin-right: 0px">{{
        calculateSum.volumSum
      }}</span>
    </div>
    <el-form
      :model="tableData"
      label-width="0"
      label-suffix="："
      ref="tableFormRef"
      :show-message="false"
      :rules="boxAndCargoTableDataRuls"
      v-loading="tableLoading"
    >
      <el-table
        :data="tableData.boxAndCargoTableData"
        border
        max-height="400px"
        size="small"
        @cell-click="cellClick"
        @selection-change="handleSelectionChange"
        :row-style="selectRowClassName"
      >
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column align="center" label="箱型箱尺" width="120">
          <template #default="scope">
            <span>
              {{ scope.row.containerSize }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="箱号" width="120">
          <template #default="scope">
            {{ scope.row.containerNo }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="封号" width="120">
          <template #default="scope">
            <span>
              {{ scope.row.sealNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="报关提单号" width="120">
          <template #default="scope">
            {{ scope.row.blno }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="英文品名" width="120">
          <template #header>
            <div class="table-header">英文品名</div>
          </template>
          <template #default="scope">
            {{ scope.row.cargoName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="HS CODE" width="120">
          <template #default="scope">
            {{ scope.row.hscode }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="单证装箱件数" width="140">
          <template #default="scope">
            {{ scope.row.pkgs }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="包装单位" width="120">
          <template #default="scope">
            {{ scope.row.packageType }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="毛重（KGS）" width="140">
          <template #default="scope">
            {{ scope.row.grossWeight }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="体积(CBM)" width="140">
          <template #default="scope">
            {{ scope.row.measurement }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="唛头">
          <template #default="scope">
            {{ scope.row.marks }}
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, toRaw } from 'vue'
import selectDown from '../components/selectDown.vue'
import childTable from '../components/docDetailBoxTableChild.vue'
import docDetailBoxAllGoodsTable from './docDetailBoxAllGoodsTable.vue'
import {
  validateOnlyNumberTwo,
  validateNumber,
  validataPhoneAndTelephone
} from '@/utils/validate.js'
export default defineComponent({
  components: {
    selectDown,
    childTable
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {}
    },
    //详细数据副本
    detailDataCopy: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['update:detailData'],
  computed: {
    data: {
      get() {
        return this.detailData
      },
      set(value) {
        this.$emit('update:detailData', value)
      }
    }
  },
  data() {
    return {
      tableData: {
        boxAndCargoTableData: []
      },
      tableLoading: false,
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引
      tableSelect: [],
      tableSelectAdd: [],
      ticketList: [], //分票数据
      calculateSum: {
        pkgsSum: 0,
        weightSum: 0,
        volumSum: 0
      },
      // 选择货物
      calculateCargoSum: {
        pkgsSum: 0,
        weightSum: 0,
        volumSum: 0
      },
      // 用于autocompelte组件
      timeout: null,
      dialogData: {
        title: '载入货物',
        show: false
      },
      // 是否已选择集装箱列表
      rowBoxs: '',
      boxAndCargoTableDataRuls: {
        cargoName: [
          {
            required: true,
            message: '请填写英文品名',
            trigger: ['blur', 'change']
          }
        ]
      },
      formRules: {
        ctnNoEN: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      // 获取所有货物的数据
      formDataTable: [],
      formData: {
        bookingId: '', //提单id
        containerId: '', //箱号id
        packings: [] //选中的货物
      }
    }
  },
  methods: {
    validateNumber,
    validateOnlyNumberTwo,
    validataPhoneAndTelephone,
    // 计算总件数和总毛重和总体积
    calculateSumAll(data) {
      this.calculateSum = {
        pkgsSum: 0,
        weightSum: 0,
        volumSum: 0
      }
      for (const iterator of data) {
        this.calculateSum.pkgsSum += iterator.pkgs ? parseInt(iterator.pkgs) : 0
        this.calculateSum.weightSum += iterator.grossWeight
          ? parseFloat(iterator.grossWeight)
          : 0
        this.calculateSum.volumSum += iterator.measurement
          ? parseFloat(iterator.measurement)
          : 0
      }
    },

    // 设置集装箱列表是否已选择
    setBox(row) {
      this.rowBoxs = row
      this.tableData.boxAndCargoTableData = this.detailData.packings.filter(
        (item) => {
          if (item.containerNo == row.containerNo) {
            return item
          }
        }
      )
      this.calculateSumAll(this.tableData.boxAndCargoTableData)
    },

    // 高亮勾选行
    selectRowClassName({ row, rowIndex }) {
      if (this.tableSelect.includes(row)) {
        return {
          'background-color': '#5A9CF819'
        }
      }
      return ''
    }
  },
  watch: {}
})
</script>
<style lang="scss" scoped>
@import '@/styles/business/business.scss';

:deep(.el-table) {
  .el-table__header th {
    background-color: #f7f8fa;
  }
  .cell {
    height: 32px;
    line-height: 32px;
  }
  .el-table_1_column_1 .cell {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .el-table__cell {
    padding: 0;
    height: 32px;
  }
  .el-input-number {
    width: 100%;
    .el-input__inner {
      text-align: left;
      padding: 0 8px;
    }
    .el-input-number__decrease {
      display: none;
    }
    .el-input-number__increase {
      display: none;
    }
  }
  .el-input__inner {
    padding: 0 8px;
  }
  .el-date-editor {
    .el-input__prefix {
      display: none;
    }
  }
}
:deep(.el-dialog) {
  padding: 0px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 16px;
  }

  .el-dialog__body {
    // padding: 8px 12px 8px 18px;
    padding: 0;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
    text-align: center;
  }

  .cargo-container {
    margin: 8px 12px 8px 18px;
    .statistical-information {
      padding: 4px 8px;
      background: #f3f3f3;
      width: 100%;
    }
    .statistical-title {
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
    }
    .statistical-number {
      color: #5a9cf8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      margin-right: 12px;
    }
    .el-table th .cell {
      background: #f8f8f8;
    }
    .el-checkbox.el-checkbox--small .el-checkbox__inner {
      width: 16px;
      height: 16px;
    }
    .el-checkbox.el-checkbox--small .el-checkbox__inner::after {
      height: 8px;
    }
    .el-checkbox.el-checkbox--small .el-checkbox__inner:after {
      width: 5px;
    }
  }
  .el-form-item__label {
    padding: 0px;
    color: #000000d8;
    font-family: PingFang SC;
    font-weight: normal;
    letter-spacing: 0px;
  }
}

:deep(.el-checkbox) {
  height: 100%;
}
</style>
